<template>
  <PageContainer>
    <view class="container">
      <Header v-model="headerHeight" title="签到" />
      <!-- <TResult
        types="success"
        title="签到成功"
        content="已成功签到当前活动,欢迎参与活动!"
        :cancel-text="isActivityArrange ? '查看活动安排及排座' : ''"
        confirm-text="查看参会证"
        @cancel="cancel"
        @confirm="confirm"
      /> -->
      <TResult
        types="success"
        title="签到成功"
        content=""
        cancel-text="回到首页"
        confirm-text="活动详情"
        @cancel="cancel"
        @confirm="confirm"
      />
      <view
        v-if="arrangeVoList.length"
        class="pa-16 mx-16 br-8 arrange-info"
        :style="{ maxHeight: `calc(100vh - 488rpx - ${headerHeight}px)` }"
      >
        <scroll-view
          scroll-y
          :enable-flex="true"
          scroll-with-animation
          scroll-anchoring
          :enhanced="true"
          :show-scrollbar="false"
          :style="{ maxHeight: `calc(100vh - 488rpx - ${headerHeight}px)` }"
        >
          <view class="fz-18 mb-12 fontTC">
            <text>您的活动安排</text>
          </view>
          <view class="fz-14 mb-12 fontTC">
            <text>以下是您的活动安排，建议截图保存活动安排哦~</text>
          </view>
          <template v-for="v in arrangeVoList" :key="v.id">
            <view class="arrange-item mb-12 pa-12 br-8 fz-14">
              <view class="mb-8 disFlx">
                <text class="item-label">安排名称</text>
                <text class="mr-8" style="color: #969799">：</text>
                <text>{{ v.name }}</text>
              </view>
              <view class="mb-8 disFlx">
                <text class="item-label">位置编号</text>
                <text class="mr-8" style="color: #969799">：</text>
                <text>{{ v.displayName }}</text>
              </view>
              <view v-if="v.startTime" class="mb-8 disFlx">
                <text class="item-label">时间</text>
                <text class="mr-8" style="color: #969799">：</text>
                <text>{{ v.startTime }}</text>
              </view>
              <view v-if="v.address" class="disFlx">
                <text class="item-label">地点</text>
                <text class="mr-8" style="color: #969799">：</text>
                <text>{{ v.address }}</text>
              </view>
            </view>
          </template>
          <!-- <view
          v-if="dataList.length > arrangeVoList.length"
          class="fz-12 disFlxAC"
          style="color: #969799"
          @click="toActivityScheduling"
        >
          <text>全部安排</text>
          <text class="ali-icon ml-4">&#xe67b;</text>
        </view> -->
        </scroll-view>
      </view>
      <MoreConnections v-if="activityId" :scene="2" :activityId="activityId"></MoreConnections>
      <FixedCode />
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* signInResult 签到结果 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import TResult from '@/components/TResult/index.vue';
  import FixedCode from '@/components/OfficialAccount/fixedCode.vue';
  import { computed, ref, unref } from 'vue';
  import { navigateBack, onLoad, reLaunch, switchTab } from '@/router';
  import { activitySignImge, attendanceCard, findActivityArrangeList } from '@/api/activity';
  import type { FindActivityArrangeListResult } from '@/api/activity/types';
  import { TabbarPageEnum } from '@/enums/pageEnum';
  import MoreConnections from '../components/MoreConnections/MoreConnections.vue';

  const headerHeight = ref<number>(87);
  const dataList = ref<FindActivityArrangeListResult[]>([]);

  // 传入参数，用于签到
  const activityId = ref<number>();
  const equipmentNumber = ref<string>('');
  // 传出参数，查看参会证，避免重复签到打印
  const activityRegisterId = ref<number>();
  const isActivityArrange = ref<boolean>(false);
  const attendanceCardUrl = ref<string>('');
  const activityArrangeList = ref<FindActivityArrangeListResult[]>([]);
  onLoad<'signInResult'>(async (op) => {
    activityId.value = op.activityId;
    equipmentNumber.value = op.equipmentNumber;

    if (op.activityRegisterId && op.signType) {
      activityRegisterId.value = op.activityRegisterId;
      const res = await activitySignImge({
        registerId: op.activityRegisterId,
        signType: op.signType,
        equipmentNumber: op.equipmentNumber,
        signImg: op.url,
      });
      activityArrangeList.value = res.activityArrangeList;
    } else {
      const res = await attendanceCard(op.activityId, op.url, op.equipmentNumber, op.signType);
      attendanceCardUrl.value = res.attendanceCardUrl;
      activityRegisterId.value = res.activityRegisterId;
      isActivityArrange.value = res.isActivityArrange;
      dataList.value = await findActivityArrangeList({
        activityId: op.activityId as number,
        activityRegisterId: activityRegisterId.value as number,
      });
    }
  });

  const arrangeVoList = computed(() => {
    if (dataList.value && dataList.value.length) return dataList.value;
    return activityArrangeList.value || [];
  });

  const cancel = () => {
    switchTab(TabbarPageEnum.BASE_HOME);
  };

  function toActivityScheduling() {
    reLaunch({
      name: 'activityScheduling',
      options: { activityId: unref(activityId), activityRegisterId: unref(activityRegisterId) },
    });
  }

  const confirm = () => {
    reLaunch({
      name: 'activityDetails',
      options: {
        id: activityId.value as number,
      },
    });
    // reLaunch({
    //   name: 'attendanceCard',
    //   options: {
    //     activityId: unref(activityId),
    //     equipmentNumber: unref(equipmentNumber),
    //     activityRegisterId: unref(activityRegisterId),
    //     isActivityArrange: unref(isActivityArrange),
    //     attendanceCardUrl: unref(attendanceCardUrl),
    //   },
    // });
  };
</script>

<style lang="scss" scoped>
  .arrange-info {
    background-color: #fff;
    color: #333;
    margin-top: -48rpx;
    .arrange-item {
      background-color: #fff4e7;
      .item-label {
        flex-shrink: 0;
        display: inline-block;
        width: 120rpx;
        vertical-align: middle;
        text-align: justify;
        text-align-last: justify;
        color: #969799;
      }
    }
  }
</style>
